<template>
	<view class="uni-padding-wrap" style="padding-top: 30rpx;">

		<!-- <view  class="uni-padding-wrap uni-common-mt">
			<view class="uni-flex uni-row">
				<!-- <view class="flex-item group-check_all">
					<checkBox class="yg-checkbox" :isselected="isSelectAll" @change="selectAllItems"></checkBox>
					<view class="">
						全选
					</view>
				</view>
				<view class="flex-item group-info_button_danger" @click="delAll">删除</view>
				<view class="flex-item group-info_button" @click="apendPerson"> 添加</view>

			</view>
		</view> -->
		<view id="vm" class="pubu" v-cloak>
			<!-- 左边的瀑布 -->
			<ul class="yg yg_l">
				<li v-for="(item,index) in userList" :key="index" v-if="index%2==0" @click="selectItem(item)">
					<!-- <checkBox class="yg-checkbox" :isselected="item.isChecked" @change="selectItem(item)">
					</checkBox> -->
					<view class="">
						<div>
							<image :src="'http://116.205.142.103:'+item.headPath + item.headName" mode="scaleToFill"></image>
						</div>
						<p class="tit">{{ item.name }}</p>
						<p class="subtit">{{ item.goods_advword }}</p>
					</view>
				</li>
			</ul>
			<!-- 右边的瀑布 -->
			<ul class="yg yg_r">
				<li v-for="(item,index) in  userList" :key="index" v-if="index%2==1" @click="selectItem(item)">
					<!-- <checkBox class="yg-checkbox" :isselected="item.isChecked" @change="selectItem(item)">
					</checkBox> -->
					<view>
						<div>
							<image :src="'http://116.205.142.103:'+item.headPath + item.headName" mode="scaleToFill"></image>
						</div>
						<p class="tit">{{ item.name }}</p>
						<p class="subtit">{{ item.goods_advword }}</p>
					</view>
				</li>
			</ul>
		</view>

		<tki-tree ref="tkitree" :confirmColor="confirmColor" :selectParent="selectParent" :multiple="multiple" :range="getWorkType" :foldAll="flod"
			rangeKey="name" @confirm="treeConfirm" @cancel="treeCancel" @search="searchTree"></tki-tree>

		<view v-show="userList.length <= 0" class="no_data" style="clear: both;">暂无班组人员~</view>
	</view>
</template>

<script>
	import checkBox from '../../components/custom-checkbox/custom-checkbox.vue'
	let testList = []
	export default {
		components: {
			checkBox,
		},
		data() {
			return {
				selectAllFlag: false,
				list: [],
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
				treeList: [{
							id: 1,
							name: '北京市',
							children: [{
								id: 11,
								name: '市辖区',
							}, ]
						},
						{
							id: 2,
							name: '河北省',
							children: [],
						}
				],
				confirmColor: "#007aff",
				multiple: true,
				selectParent: false,
				flod: false,
				userList:[],
				isSelectAll: false,
				getWorkType: []
			}
			
		},
		props:{
			manageInfo:{
				type:Object
			},
			flag: {
				type: String
			},
		},
		computed: {
			
		},
		created() {
			uni.request({
			    url: 'http://116.205.142.103:8808/labor/system/user/getWorkType',
			 	method: 'get',
			 	success: res => {
					this.loadTreeData(res.data.data)
				//	this.getWorkType = res.data.data
			 	}
			 })
			this.userList = []
			this.groupInfoForm = uni.getStorageSync("editManage")
			debugger
			if (this.flag == 1){
				this.manageInfo.userList.forEach(item =>{
				//	this.userList.push(item.id)
					this.userList.push({
						imageUrl: 'http://116.205.142.103:'+item.headPath+item.headName,
						fileName: item.fileName,
						filePath: item.filePath,
						headName: item.headName,
						headPath: item.headPath,
						id: item.id,
						name: item.name,
						isChecked: false
					})
				})
			}
		},
		methods: {
			loadTreeData(data){
				let trrData=[]
				data.forEach(item => {
					let chData = []
					item.chilren.forEach(chitem =>{
						chData.push({
							id: chitem.id,
							name: chitem.name,
							fileName:chitem.fileName,
							filePath:chitem.filePath,
							headName: chitem.headName,
							headPath:chitem.headPath, 
							workTypeName: chitem.workTypeName,
							isChecked:false
							})
					})
					this.getWorkType.push({
						id: item.id,
						name: item.name,
						children:chData
					})
				})
				
			},
			// 全选
			selectAllItems() {
				this.isSelectAll = this.isSelectAll ? false : true;
				this.userList.forEach((item) => {
					item.isChecked = this.isSelectAll ? true : false;
				});
			},
			// 选单个
			selectItem(items) {
				this.userList.forEach((item) => {
					debugger
					if(item.id == items.id){
						item.isChecked = item.isChecked ? false : true;
						console.log(JSON.stringify(item))
					}
				});
			},
			// 删除
			delAll(item) {
				console.log("删除")
				var unSelectItems = [];
				this.userList.forEach(item => {
					if (!item.isChecked) {
						unSelectItems.push(item);
					}
				})
				this.userList = unSelectItems;
				this.$emit('addUserList',this.userList);
			},
			// 添加
			apendPerson() {
				this.$refs.tkitree._show();
				// this.$refs.popup.open('center');
			},
			// 确定回调事件
			treeConfirm(e) {
				let myData = []
				const that = this 
				e.forEach(item => {
					let chData = []
					console.log(JSON.stringify(item));
					let idCheck = 0
					if(typeof item.filePath === "undefined"){
						idCheck = 1
					}
					that.userList.forEach(user => {
						if (user.id == item.id){
							idCheck = 1
						}
					})
					if(idCheck == 0){
						that.userList.push({
							id: item.id,
							name: item.name,
							fileName:item.fileName,
							filePath:item.filePath,
							headName: item.headName,
							headPath:item.headPath, 
							workTypeName: item.workTypeName,
							isChecked:false
						})
					}
				})
				//this.userList = myData
				this.$emit('addUserList',this.userList);
				//uni.$emit('selectAccount',{accountInfo:JSON.parse(JSON.stringify(accountInfo))})
//  uni.$on('selectAccount',(data)=>{
//     this.name=data.accountInfo.name;
// })

			},
			// 取消回调事件
			treeCancel(e) {
				console.log(e)
			},
			// 取消回调事件
			searchTree(e) {
				console.log("搜索关键字", e);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import '../../common/css/pubu.css';

	.page {
		width: 100%;
		height: 100%;
		padding: 0 20upx;
		box-sizing: border-box;
	}

	.flex-item {
		width: 33.3%;
		height: 20rpx;
		text-align: left;
		line-height: 20rpx;
	}

	.inner-item {
		height: 20rpx;
		text-align: left;
		line-height: 20rpx;
	}

	.uni-flex {
		padding: 24rpx 0;
	}

	.group-check_all {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}

	.group-info_button {
		color: #007aff;
	}

	.group-info_button_danger {
		color: #e64340;
	}

	.no_data {
		width: 100%;
		height: 500rpx;
		line-height: 500rpx;
		text-align: center;
	}
</style>
